{% extends 'layout/base.html' %}
{% load custom_tag %}
{% block title %}关于 | {% endblock %}
{% block banner %}
	<div class="bg-cover index-back pd-header about-cover">
		<div class="container">
			{% include 'layout/banner.html' %}
		</div>
	</div>
{% endblock %}
{% block contents %}
	<main class="content">
		<div id="aboutme" class="container about-container">
			<div class="card">
				<div class="card-content">
					<div class="row">
						<div class="post-statis col l4 hide-on-med-and-down" data-aos="zoom-in-right">

							<div class="statis">
								<span class="count"><a href="{% url 'index' %}">{{ articles | length }}</a></span>
								<span class="name">文章</span>
							</div>


							<div class="statis">
								<span class="count"><a
										href="{% url 'category_tag' %}">{{ categories | length }}</a></span>
								<span class="name">分类</span>
							</div>


							<div class="statis">
								<span class="count"><a href="{% url 'category_tag' %}">{{ tags | length }}</a></span>
								<span class="name">标签</span>
							</div>


						</div>
						<div class="col s12 m12 l4">
							<div class="profile center-align">
								<div class="avatar">
									<img src="{{ about.avatar }}" alt="{{ SITE_NAME }}"
									     class="circle responsive-img avatar-img">
								</div>
								<div class="author">
									<div class="post-statis hide-on-large-only" data-aos="zoom-in-right">

										<div class="statis">
											<span class="count"><a href="{% url 'index' %}">>{{ articles | length }}</a></span>
											<span class="name">文章</span>
										</div>


										<div class="statis">
											<span class="count"><a
													href="{% url 'category_tag' %}">{{ categories | length }}</a></span>
											<span class="name">分类</span>
										</div>


										<div class="statis">
											<span class="count"><a
													href="{% url 'category_tag' %}">{{ tags |length }}</a></span>
											<span class="name">标签</span>
										</div>


									</div>
									<div class="title">{{ SITE_NAME }}</div>
									<div class="career">{{ about.career }}</div>
									<div class="social-link hide-on-large-only" data-aos="zoom-in-left">

										{% for a in social %}
											<a href="{{ a.social_url }}" class="tooltipped" target="_blank"
											   data-tooltip="{{ a.social_des }}:{{ a.social_url }}" data-position="top"
											   data-delay="50">
												<i class="{{ a.social_icon }}"></i>
											</a>
										{% endfor %}


									</div>
								</div>
							</div>
						</div>
						<div class="col l4 hide-on-med-and-down" data-aos="zoom-in-left">
							<div class="social-link">

								{% for a in social %}
									<a href="{{ a.social_url }}" class="tooltipped" target="_blank"
									   data-tooltip="{{ a.social_des }}:{{ a.social_url }}" data-position="top"
									   data-delay="50">
										<i class="{{ a.social_icon }}"></i>
									</a>
								{% endfor %}
							</div>
						</div>
					</div>

					<div class="introduction center-align" data-aos="fade-up">
						{{ about.introduction }}
					</div>

					<style type="text/css">
                        #posts-chart,
                        #categories-chart,
                        #tags-chart {
                            width: 100%;
                            height: 300px;
                            margin: 0.5rem auto;
                            padding: 0.5rem;
                        }
					</style>
					<style>
                        .background-1 {
                            background: linear-gradient(to right, #FF0066 0%, #FF00CC 100%);
                        }

                        .background-2 {
                            background: linear-gradient(to right, #9900FF 0%, #CC66FF 100%);
                        }

                        .background-3 {
                            background: linear-gradient(to right, #2196F3 0%, #42A5F5 100%);
                        }

                        .background-4 {
                            background: linear-gradient(to right, #00BCD4 0%, #80DEEA 100%);
                        }

                        .background-5 {
                            background: linear-gradient(to right, #4CAF50 0%, #81C784 100%);
                        }

                        .background-6 {
                            background: linear-gradient(to right, #FFEB3B 0%, #FFF176 100%);
                        }

                        .background-7 {
                            background: linear-gradient(to right, #c471ed 0%, #f64f59 100%);
                        }

                        .background-8 {
                            background: linear-gradient(to right, #ef32d9 0%, #89fffd 100%);
                        }

                        .background-9 {
                            background: linear-gradient(to right, #a8ff78 0%, #78ffd6 100%);
                        }

                        .background-10 {
                            background: linear-gradient(to right, #12c2e9 0%, #c471ed 100%);
                        }
					</style>

					<div id="postCharts" class="post-charts">
						<div class="title center-align aos-init aos-animate" data-aos="zoom-in-up">
							<i class="far fa-bar-chart"></i>&nbsp;&nbsp;文章统计图
						</div>
						<div class="row">
							<div class="chart col s12 m6 l4 aos-init aos-animate" data-aos="zoom-in-up">
								<div id="posts-chart" _echarts_instance_="ec_1583763816723"
								     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
									<div style="position: relative; overflow: hidden; width: 341px; height: 286px; padding: 0px; margin: 0px; border-width: 0px;">
										<canvas data-zr-dom-id="zr_0" width="682" height="572"
										        style="position: absolute; left: 0px; top: 0px; width: 341px; height: 286px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
									</div>
									<div></div>
								</div>
							</div>

							<div class="chart col s12 m6 l4 aos-init aos-animate" data-aos="zoom-in-up">
								<div id="categories-chart" _echarts_instance_="ec_1583763816724"
								     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
									<div style="position: relative; overflow: hidden; width: 341px; height: 286px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
										<canvas data-zr-dom-id="zr_0" width="682" height="572"
										        style="position: absolute; left: 0px; top: 0px; width: 341px; height: 286px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
									</div>
									<div></div>
								</div>
							</div>

							<div class="chart col s12 m6 l4 aos-init aos-animate" data-aos="zoom-in-up">
								<div id="tags-chart" _echarts_instance_="ec_1583763816725"
								     style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
									<div style="position: relative; overflow: hidden; width: 341px; height: 286px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
										<canvas data-zr-dom-id="zr_0" width="682" height="572"
										        style="position: absolute; left: 0px; top: 0px; width: 341px; height: 286px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
									</div>
									<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 136px; top: 240px; pointer-events: none;">
										<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#82d3f4;"></span>Hackintosh:
										6
									</div>
								</div>
							</div>
						</div>
					</div>

					<script type="text/javascript" src="https://html.sqlsec.com/echarts.min.js"></script>
					<script>
                        let postsChart = echarts.init(document.getElementById('posts-chart'));
                        let categoriesChart = echarts.init(document.getElementById('categories-chart'));
                        let tagsChart = echarts.init(document.getElementById('tags-chart'));


                        let postsOption = {
                            title: {
                                text: '文章发布统计图',
                                top: -5,
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                type: 'category',
                                data: {{ date_list | safe }}
                            },
                            yAxis: {
                                type: 'value',
                            },
                            series: [
                                {
                                    name: '文章篇数',
                                    type: 'line',
                                    color: ['#6772e5'],
                                    data: {{ value_list |safe }},
                                    markPoint: {
                                        symbolSize: 45,
                                        color: ['#fa755a', '#3ecf8e', '#82d3f4'],
                                        data: [{
                                            type: 'max',
                                            itemStyle: {color: ['#3ecf8e']},
                                            name: '最大值'
                                        }, {
                                            type: 'min',
                                            itemStyle: {color: ['#fa755a']},
                                            name: '最小值'
                                        }]
                                    },
                                    markLine: {
                                        itemStyle: {color: ['#ab47bc']},
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };


                        let categoriesOption = {
                            title: {
                                text: '文章分类统计图',
                                top: -4,
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            series: [
                                {
                                    name: '分类',
                                    type: 'pie',
                                    radius: '50%',
                                    color: ['#6772e5', '#ff9e0f', '#fa755a', '#3ecf8e', '#82d3f4', '#ab47bc', '#525f7f', '#f51c47', '#26A69A'],
                                    data: [{% for category in categories %}{"name": "{{ category.name }}","value":
                                            {{ category.article_set.all | length  }}},{% endfor %}],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };


                        let tagsOption = {
                            title: {
                                text: 'TOP10 标签统计图',
                                top: -5,
                                x: 'center'
                            },
                            tooltip: {},
                            xAxis: [
                                {
                                    type: 'category',
                                    data: {{ top10_tags | safe }}
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    color: ['#82d3f4'],
                                    barWidth: 18,
                                    data: {{ top10_tags_values | safe }},
                                    markPoint: {
                                        symbolSize: 45,
                                        data: [{
                                            type: 'max',
                                            itemStyle: {color: ['#3ecf8e']},
                                            name: '最大值'
                                        }, {
                                            type: 'min',
                                            itemStyle: {color: ['#fa755a']},
                                            name: '最小值'
                                        }],
                                    },
                                    markLine: {
                                        itemStyle: {color: ['#ab47bc']},
                                        data: [
                                            {type: 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };

                        // render the charts
                        postsChart.setOption(postsOption);
                        categoriesChart.setOption(categoriesOption);
                        tagsChart.setOption(tagsOption);
					</script>


					<div class="my-projects">
						<div class="title center-align aos-init" data-aos="zoom-in-up">
							<i class="fas fa-gift"></i>&nbsp;&nbsp;我的项目
						</div>
						<div class="row">


							<div class="col s12 m6 l4 aos-init" data-aos="fade-up">
								<div class="info center-align">
									<a href="https://github.com/sqlsec/Django-Hexo-Matery" class="icon"
									   style="background: linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)"
									   target="_blank">
										<i class="fab fa-python"></i>
									</a>
									<div class="info-title">
										<a href="#" target="_blank">Django-Hexo-Matery</a>
									</div>
									<div class="info-desc">嗯！我的博客是我克隆来的~~</div>
								</div>
							</div>

							<div class="col s12 m6 l4 aos-init" data-aos="fade-up">
								<div class="info center-align">
									<a href="https://github.com/sqlsec/B360M-DS3H-I5-9600KF-RX580-CLOVER" class="icon"
									   style="background: linear-gradient(to bottom right, #F06292 0%, #EF5350 100%)"
									   target="_blank">
										<i class="fab fa-apple"></i>
									</a>
									<div class="info-title">
										<a href="#"
										   target="_blank">MSI-Z390暗黑板-I7-9700K-RX560D</a>
									</div>
									<div class="info-desc">我的台式机的黑苹果99%完美的OC驱动配置</div>
								</div>
							</div>

							<div class="col s12 m6 l4 aos-init" data-aos="fade-up">
								<div class="info center-align">
									<a href="https://github.com/sqlsec" class="icon"
									   style="background: linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)"
									   target="_blank">
										<i class="fas fa-paperclip"></i>
									</a>
									<div class="info-title">
										<a href="#" target="_blank">Django</a>
									</div>
									<div class="info-desc">立个Flag 当个多面手 等我好消息</div>
								</div>
							</div>


						</div>
					</div>
				</div>
			</div>
		</div>
	</main>
{% endblock %}